<template>
  <div
    ref="productionChart"
    class="chart"
  />
</template>

<script>
import * as echarts from 'echarts'
import { getProductionStatisticsPage } from '@/api/bigdata/productionStatistics'
export default {
  name: 'ProductionStatistics',
  data() {
    return {
      data1: [],
      data2: [],
      xData: [],
      // 柱子的上、下、中间上半、中间下半
      barColors: ['#FFFFFF', '#FFB300', '#FFFFFF', '#FFB300'],
      // 折线的线、点中心、点外围
      lineColors: ['#FF8300', '#FFF', '#FFB300'],
      minValue1: 99999999
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getProductionStatisticsPage({
        pageNum: 1,
        pageSize: 6,
        region: '中国'
      }).then(res => {
        res.data.records.sort((a, b) => {
          return a.year - b.year
        })
        this.data1 = res.data.records.map(item => {
          this.minValue1 = Math.min(item.value1, this.minValue1)
          return item.value1
        })
        this.data2 = res.data.records.map(item => {
          return item.value2
        })
        this.xData = res.data.records.map(item => item.year)
        this.drawChart()
      })
    },
    drawChart() {
      const myChart = echarts.init(this.$refs.productionChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: [
          {
            left: '20%',
            textStyle: {
              color: this.barColors[1],
              fontSize: 14,
              fontFamily: '微软雅黑'
            },
            itemWidth: 20,
            itemHeight: 20,
            data: [
              {
                name: '种植面积',
                icon: 'rect'
              }
            ]
          },
          {
            data: [
              {
                name: '产量'
              }
            ],
            itemWidth: 30,
            itemHeight: 20,
            left: '60%',
            textStyle: {
              color: this.lineColors[0],
              fontSize: 14
            }
          }
        ],
        grid: {
          top: 40,
          left: 65,
          right: 65
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval: 0
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#195384',
              type: 'dotted'
            }
          },
          data: this.xData
        },
        yAxis: [
          {
            type: 'value',
            name: '公顷',
            min: this.minValue1 * 19 / 20, // 使用数据中的最小值作为Y轴的起点
            max: 'dataMax', // 使用数据中的最大值作为Y轴的终点
            nameTextStyle: {
              color: '#b3efff',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#0a3e98'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#0a3e98',
                type: 'dotted'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#b3efff',
                fontSize: 14
              }
            }
          },
          {
            type: 'value',
            name: '吨',
            min: 'dataMin', // 使用数据中的最小值作为Y轴的起点
            max: 'dataMax', // 使用数据中的最大值作为Y轴的终点
            nameTextStyle: {
              color: '#b3efff',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#0a3e98'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#b3efff',
                type: 'dotted'
              }
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#d3efff',
                fontSize: 14
              }
            }
          }
        ],
        series: [
          {
            name: '种植面积',
            type: 'pictorialBar',
            symbolSize: [20, 10],
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            tooltip: {
              show: false
            },
            color: this.barColors[0],
            data: this.data1,
            itemStyle: {
              color: this.barColors[0]
            }
          },
          {
            name: '种植面积',
            type: 'pictorialBar',
            symbolSize: [20, 10],
            symbolOffset: [0, 7],
            z: 12,
            tooltip: {
              show: false
            },
            color: this.barColors[1],
            data: this.data1
          },
          {
            name: '种植面积',
            type: 'bar',
            barWidth: '20',
            barGap: '10%',
            barCateGoryGap: '10%',
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: this.barColors[2]
                  },
                  {
                    offset: 1,
                    color: this.barColors[3]
                  }
                ]),
                opacity: 1
              },
              emphasis: {
                barBorderRadius: 0
              }
            },
            data: this.data1
          },
          {
            name: '产量',
            type: 'line',
            yAxisIndex: 1,
            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
            lineStyle: {
              width: 3,
              color: this.lineColors[0]
            },
            itemStyle: {
              color: this.lineColors[0],
              borderColor: this.lineColors[2],
              borderWidth: 2
            },
            symbolSize: 8,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#29a5d530'
                },
                {
                  offset: 0.6,
                  color: '#29a5d520'
                },
                {
                  offset: 1,
                  color: '#29a5d510'
                }
              ])
            },
            data: this.data2
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize();
      }, false);
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 25vw;
  height: 25vh;
}
</style>
